<template>
	<view>
		<view style="margin: 20rpx auto;background-color: #FFFFFF;box-sizing: border-box;padding: 30rpx 40rpx 10rpx;border-radius: 16rpx;width: 92%;">
			<view v-for="(item,index) in list" :key='index' style="overflow: hidden;margin-bottom: 30rpx;">
				<view style="width: 88rpx;height: 88rpx;float: left;overflow: hidden;">
					<image :src="item.client.avatar" style="width: 100%;height: 100%;display: block;border-radius: 50%;" mode=""></image>
				</view>
				<view style="max-width: 60%;float: left;line-height: 88rpx;margin: 0 20rpx;font-size: 26rpx;color: #333;font-weight: 600;" class="yihang">
					{{item.client_name || ''}}
				</view>
				<image @click="xuanze(index)" :src="item.check?xuan:wei" style="width: 40rpx;height: 40rpx;display: block;float: right;margin-top: 24rpx;" mode=""></image>
			</view>
			<view style="text-align: center;margin-top: 20rpx;">
				<image v-if="kk" :src="require('@/static/my/no-data.png')" style="width: 334rpx;"  mode="widthFix"></image>
				<view style="width: 80%;margin: 0 auto;">
					<u-divider color='#717171' bg-color='#f0f2f8' height='80' border-color='#717171' text="暂无数据" v-if="list.length==0"></u-divider>
					<u-divider color='#717171' bg-color='#f0f2f8' height='80' border-color='#717171' text="没有更多互关好友" v-if="list.length>0 && enmpy"></u-divider>
				</view>
			</view>
		</view>
		<view @click="qunren" style="width: 690rpx;height: 92rpx;background:#1FB0AC;border-radius: 46rpx;line-height: 92rpx;text-align: center;color:#ffffff;font-size: 28rpx;font-weight: 600;margin:100rpx auto 0;">
			确认邀请<text v-if="num!=0">（{{num}}）</text>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				wei:'https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230510/883da943e60c26214b79cccfcd84f3e9.png',
				xuan:'https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230510/67942d15e917936857335a3f40d8bc47.png',
				page:1,
				list:[],
				enmpy:false,
				kk:false,
				num:0,
				client_ids:[]
			}
		},
		onLoad(option) {
			this.id=option.id
			this.yao()
		},
		onReachBottom: function() {
			console.log(222222222)
			if (this.enmpy) {
				return
			} else {
				this.yao()
			}
		},
		methods:{
			// 可邀请人员
			yao:function(){
				this.post('api/im/im/group_friend_list',{group_id:this.id,page:this.page,limit:15},true).then(res=>{
					if(res.code==1){
						if(this.page==1){
							if (res.data.data== null || res.data.data.length == 0) {
								this.kk = true
								this.enmpy = true
								return
							} else if (res.data.data.length < 15) {
								this.enmpy = true
							}
						}else{
							if (res.data.data== null || res.data.data.length == 0) {
								this.enmpy = true
								return
							} else if (res.data.data.length < 15) {
								this.enmpy = true
							}
						}

						this.page++
						for(let i=0;i<res.data.data.length;i++){
							res.data.data[i].check=false
							this.list.push(res.data.data[i])
						}
						console.log(this.list,123)
						// this.list.push(...res.data.data)
					}else{
						this.kk = true
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			},
			xuanze:function(index){
				this.num=0
				this.client_ids=[]
				this.list[index].check=!this.list[index].check
				for(let i=0;i<this.list.length;i++){
					if(this.list[i].check){
						this.num+=1
						this.client_ids.push(this.list[i].client_id)
					}

				}
			},
			qunren:function(){
				if(this.num==0){
					uni.showToast({
						title: '请选择邀请的好友',
						icon: "none",
						duration: 1000
					})
					return
				}else{
					this.post('api/im/im/invite_member',{group_id:this.id,client_ids:this.client_ids.join(',')},true).then(res=>{
						console.log(res)
						if(res.code==1){
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 1000
							})
							setTimeout(function(){
								uni.navigateBack({
									delta:1
								})
							},1500)
						}else{
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 1000
							})
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
		padding-bottom: 40rpx;
		font-family: Demibold;
	}
	.yichu{
		width: 170rpx;
		height: 50rpx;
		background: #F8F8F8;
		border-radius: 25rpx;
		text-align: center;
		line-height: 50rpx;
		float: right;
		font-size: 24rpx;
		color: #333333;
		margin-top: 19rpx;
		// font-weight: 600;
	}
</style>